<template>
  <div class="login">
    <div class="bg"></div>
    <div class="main">
      <div class="content">
        <div class="content-1">智慧园区-登录</div>
        <a-form :model="formState" layout="vertical" @finish="onFinish">
          <a-form-item
            label="账号"
            name="username"
            :rules="[{ required: true, message: '请输入账号名称!' }]"
          >
            <a-input v-model:value="formState.username">
              <template #prefix>
                <UserOutlined class="site-form-item-icon" />
              </template>
            </a-input>
          </a-form-item>

          <a-form-item
            label="密码"
            name="password"
            :rules="[{ required: true, message: '请输入密码!' }]"
          >
            <a-input-password v-model:value="formState.password">
              <template #prefix>
                <LockOutlined class="site-form-item-icon" />
              </template>
            </a-input-password>
          </a-form-item>

          <a-form-item>
            <a-form-item name="remember" no-style>
              <a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
            </a-form-item>
          </a-form-item>

          <a-form-item>
            <a-button
              :disabled="disabled"
              block
              type="primary"
              html-type="submit"
              class="login-form-button"
            >
              登录
            </a-button>
          </a-form-item>
        </a-form>
        <div class="content-2">
          仅用于IT培训教学使用，为保障您的个人信息安全，请勿向平台录入任何个人敏感信息（如手机号、身份证号等）！
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, computed } from 'vue';
import { useRouter } from 'vue-router';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { loginReqeust } from '@/apis/user.ts';
import { useUserStore } from '@/store';

const router = useRouter();
const store = useUserStore();
const formState = reactive<any>({
  username: 'demo',
  password: 'zh@hm#23',
  remember: true,
});

const disabled = computed(() => {
  return !(formState.username && formState.password);
  // return !formState.username || !formState.password
});
// 下面是表单校验成功以后执行的函数
const onFinish = async () => {
  const res = await loginReqeust({
    username: formState.username,
    password: formState.password,
  });
  // vuex里面 thsi.$store.dispatch('action')
  if (res.code === 10000) {
    store.setToken(res.data.token);
    // this.$router.push('/')
    router.push('/');
  }
};
</script>

<style lang="scss">
.login {
  display: flex;
  .bg {
    width: 60vw;
    height: 100vh;
    // background-color: aquamarine;
    background: url('@/assets/login-bg.svg') no-repeat;
    // 类似于精灵图的写法，将图片的右上角显示出来，自带圆角，不需要我们自己写圆角边框
    background-position: right top;
    // 图片显示的模式，cover裁剪还是 contain完全显示图片,但是这样盒子会有空白区域
    background-size: cover;
  }
  .main {
    flex: 1;
    // background-color: blanchedalmond;
    position: relative;
    .content {
      position: absolute;
      // 这个50% 是父元素的宽高的50%
      top: 50%;
      left: 50%;
      // 在还要相对于自己 往上 和往左移动自己的50%
      transform: translate(-50%, -50%);
    }
    .content-1 {
      font-size: 25px;
      margin-bottom: 50px;
    }
    .content-2 {
      font-size: 12px;
      color: red;
    }
  }
}
</style>
